<template>
	<view id="voteFour">
		<view class="vote-four-wrap">
			<view class="vote-title">
				选聘新物业投票
			</view>
			<view class="vote-title sub-title"
				v-if="voteDetailInfo.check_org_vote_begin_time && voteDetailInfo.check_org_vote_end_time">
				投票时间：
				{{voteDetailInfo.check_org_vote_begin_time.substring(0,10)}} ~
				{{voteDetailInfo.check_org_vote_end_time.substring(0,10)}}
			</view>
		</view>
		<view class="vote-vote-wrap" style="padding-bottom: 160rpx;" v-if="voteOrgInfo.id">
			<view class="votePersonInfo">
				<view class="votePersonWrap">
					<view class="personInfo">
						<view class="">公司名称：<text style="color: #000000;">{{voteOrgInfo.org_name}}</text></view>
						<view class="">总部地址：<text style="color: #000000;">{{voteOrgInfo.org_position}}</text></view>
						<view class="">在管项目：<text style="color: #000000;">{{voteOrgInfo.org_pro_total}}</text></view>
						<view class="">注册资金：<text style="color: #000000;">{{voteOrgInfo.org_enroll_fund}}</text></view>
					</view>
				</view>
				<view class="vote-bottom-btn">
					<view style="color:#999999;font-weight: bold;">
						已投{{voteOrgInfo.org_vote_total}}票
					</view>
					<view style="color: #007BFF;" @click="nameListDetail(voteOrgInfo)">
						查看详情
					</view>
				</view>
			</view>
			<view class="bottom-btn">
				<view class="submit-vote" v-if="this.alreadyVoteTotal == 0" @click="confirmAddVote">
					投票此物业
				</view>
				<view class="vote-success" v-if="this.alreadyVoteTotal == 1">
					投票成功
				</view>
			</view>
			<view style="text-align: center;color: #999999;">
				投票代表您同意该物业公司成为该小区现物业公司
			</view>
		</view>
		<!-- 用户认证 -->
		<view style="position: relative;">
			<view class="meeting-dialog">
				<u-popup v-model="isCertification" mode="center" border-radius="14">
					<view class="meeting-wrap">
						<view class="meeting-title">
							未提交认证
						</view>
						<view class="meeting-start">
							<image class="img" src="../../../static/vote/seconded.png"></image>
						</view>
						<view class="meeting-cont">
							请先进行实名认证后进行附议
						</view>
						<view class="meeting-btn" @click="submit()">
							提交认证
						</view>
					</view>
				</u-popup>
			</view>
		</view>

		<!-- 确认投票弹窗 -->
		<view class="modal" v-if="confirm">
			<view class="modal-cont">
				<view class="modal-title">确认投票</view>
				<view style="color: #000000;margin-top: 30px;">
					是否确认投票
				</view>
				<view class="modal-bottom">
					<view class="btn-cancel" @click="confirm = false">关闭</view>
					<view class="btn-sure" @click="addVote()">确定</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />


	</view>
</template>

<script>
	export default {
		props: ['id', 'directorType'],

		data() {
			return {
				voteOrgInfo: {},
				alreadyVoteTotal: 0,
				checkVoteTotal: 0,
				//表决详情
				voteDetailInfo: {},
				//剩余时间详细
				diffTimeInfo: {},
				voteUserList: {},
				userId: uni.getStorageSync('rawData').userId,
				voteUserInfo: {},
				confirm: false,
				centert: {}, //选中的投票对象
				checkIndex: null, //选中的投票对象下标
				isCertification: false, //用户认证
				publicityInfo: {},
				timeRemaining: {}, //至开始时间剩余多少
			}
		},
		created() {
			console.log(this.id)
		},
		mounted() {
			this.getVoteDetailInfo();
			//获取操作人认证详细
			this.getVoteUserInfo();
			//查询委员公示信息

			//获取公司信息
			this.getOrgInfo();
		},
		methods: {
			getTimeRemaining(val) {
				this.$requestYz.api.getDiffTime({
					endTime: val
				}).then(res => {
					this.timeRemaining = res.data.data;
				})
			},
			getOrgInfo() {
				this.$requestYz.api.getVoteOrgInfo({
					p_id: this.id,
					pageIndex: 1,
					org_vote_type: 1
				}).then(res => {
					if (res.data.data.datalist && res.data.data.datalist.length > 0) {
						this.voteOrgInfo = res.data.data.datalist[0];
						this.verifyVoteTotal();
					}
				})
			},
			//校验是否投过票
			verifyVoteTotal() {
				this.$requestYz.api.verifyVoteTotal({
					essential_information_id: this.id,
					voteType: this.directorType,
					user_id: uni.getStorageSync('rawData').userId,
					vote_user_id: this.voteOrgInfo.id
				}).then(res => {
					this.alreadyVoteTotal = res.data.data.data
				})
			},
			//确认投票
			confirmAddVote() {
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				if (this.timeRemaining.minutes != 0) {
					this.$refs.uToast.show({
						title: '投票未开始',
						type: 'warning',
						icon: false
					})
					return;
				}
				this.$requestYz.api.ownerOrgVote({
					id: this.voteOrgInfo.id,
					user_id: uni.getStorageSync('rawData').userId,
					user_name: this.voteUserInfo.full_name,
					voteType: this.directorType,
					user_building_number: this.voteUserInfo.building_number //投票人房间信息
				}).then(res => {
					uni.showToast({
						title: '投票成功！',
						icon: 'success'
					});
					let that = this;
					setTimeout(function() {
						that.alreadyVoteTotal = 1
						that.checkVoteTotal = 0;
						that.getOrgInfo();
					}, 1000);
				})
			},
			cancelAdd(item, index) {
				if (this.alreadyVoteTotal != 0) {
					this.$refs.uToast.show({
						title: '您已投票，无法再次投票',
						type: 'warning',
						icon: false
					})
					return;
				}
				this.voteUserList[this.checkIndex].whetherVote = false;
				this.voteUserList[this.checkIndex].director_vote_total = this.voteUserList[this.checkIndex]
					.director_vote_total - 1
				this.checkVoteTotal = this.checkVoteTotal - 1;
			},
			nameListDetail(item) {
				let items = encodeURIComponent(JSON.stringify(item))
				console.log(item)
				uni.navigateTo({
					url: '/pages/vote/components/publicity/voteOrgDetail?item=' + items
				})
			},
			getPublicityInfo(val) {
				this.$requestYz.api.getRecordInfo({
					contentStatus: val,
					id: this.id
				}).then(res => {
					this.publicityInfo = res.data.data;
				})
			},
			addVote() {
				this.voteUserList[this.checkIndex].whetherVote = true;
				this.voteUserList[this.checkIndex].director_vote_total = this.voteUserList[this
					.checkIndex].director_vote_total + 1
				this.checkVoteTotal = this.checkVoteTotal + 1;
				this.confirm = false
			},
			//提交认证
			submit() {
				this.isCertification = false;
				uni.navigateTo({
					url: './submitAuth?vote_id=' + this.id + "&proName=" + this.voteDetailInfo.community_name
				})
			},
			getVoteUserInfo() {
				this.$requestYz.api.getVoteUserInfo({
					vote_id: this.id,
					user_id: this.userId,
				}).then(res => {
					this.voteUserInfo = res.data.data
				})
			},
			//表决详细
			getVoteDetailInfo() {
				this.$requestYz.api.getVoteDetailInfo({
					id: this.id,
				}).then(res => {
					this.voteDetailInfo = res.data.data.voteInfo;
					this.getTimeRemaining(this.voteDetailInfo.check_org_vote_begin_time);
				})
			},

		}
	}
</script>

<style lang="scss">
	.vote-success {
		width: 570rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		opacity: 0.5;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		margin: 60rpx auto;
	}

	$color:#999;
	$bold:bold;

	.bottom-btn {
		width: 100%;
		height: 108rpx;
		bottom: 0;
		margin-top: 30px;

		.submit-vote {
			width: 570rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 44rpx;
			margin: 12rpx auto;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
		}
	}

	.meeting-dialog {
		position: relative;

		::v-deep .u-mode-center-box {
			width: 670rpx !important;
			height: 800rpx;
			background: #FFFFFF !important;
			border-radius: 12rpx !important;
		}



		.meeting-wrap {
			padding: 40rpx;
		}

		.meeting-title {
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 20px;
			border-bottom: 1px solid #E7ECE1;
		}

		.meeting-start {
			margin: 40rpx 0 24rpx;
			font-size: 16px;
			font-weight: bold;

			.img {
				width: 160px;
				height: 114px;
				margin: 0 auto;
				transform: translate(74px, 8px);
			}
		}

		.meeting-cont {
			color: red;
			font-size: 32rpx;
			border-bottom: 60rpx;
			margin-top: 50rpx;
			margin-bottom: 120rpx;
			text-align: center;
		}

		.succ {
			color: #333300;
			font-weight: bold;
		}

		.meeting-btn {
			width: 350rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFFFFF;
			border-radius: 22px;
			border: 1px solid #427705;
			text-align: center;
			color: #427705;
			margin: 40px auto;
			font-weight: bold;
		}
	}

	#voteFour {
		.vote-four-wrap {
			.vote-title {
				font-size: 36rpx;
				font-weight: bold;
				margin: 30rpx auto 0;
				text-align: center;
			}

			.sub-title {
				font-size: 28rpx;
				margin: 20rpx auto 40rpx;
				font-weight: $bold;
				color: $color;
			}

			.colors {
				color: red;
			}
		}

		.modal {
			/* width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba($color: #000000, $alpha: 0.6);
			z-index: 999; */
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 10;
		}

		.modal-cont {
			width: 610rpx;
			// min-height: 420rpx;
			background: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.modal-icon {
			width: 80rpx;
			height: 80rpx;
			margin-top: 67rpx;
		}

		.modal-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 45rpx;
			margin-top: 22rpx;
		}

		.modal-content {
			width: 443rpx;
			// height: 88rpx;
			font-size: 28rpx;
			text-align: center;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
			margin-top: 24rpx;
		}

		.text-area {
			margin-top: 24rpx;
			width: 520rpx;
			padding: 10rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 44rpx;
			max-height: 105rpx;
			border: 1rpx solid #f0f0f0;
			border-radius: 8rpx;
		}

		.modal-bottom {
			width: 100%;
			height: 84rpx;
			border-top: 1rpx solid #e6e9ed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;
		}

		.btn-cancel {
			width: 50%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			border-right: 1rpx solid #d8d8d8;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
		}

		.btn-cancel1 {
			width: 100%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			/* border-right: 1rpx solid #d8d8d8; */
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
		}

		.btn-sure {
			width: 50%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #578ef0;
		}


		.votePersonInfo {
			width: 100%;
			height: 400rpx;
			background: #FFFFFF;
			box-shadow: 0px 1px 0px 0px #EEEEEE;
			margin-top: 40rpx;

			.votePersonWrap {
				padding: 30rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #999;
				box-shadow: 0px 1px 0px 0px #eee;
			}

			.personInfo {
				margin-left: 40rpx;
				line-height: 46rpx;
			}

			.vote-bottom-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 150rpx;
				padding: 0 30rpx;
				color: #999;

				.btn {
					width: 200rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #76D904 0%, #417505 100%);
					border-radius: 44rpx;
					color: #fff;
					line-height: 60rpx;
					text-align: center;
				}

				.already {
					background: #FFFFFF;
					color: #999;
					border: 1px solid #CCCCCC;
				}
			}
		}

		.single-button {
			width: 100%;
			height: 77px;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
		}

		.single-button .btn {
			width: 238px;
			height: 40px;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 20px;
			text-align: center;
			line-height: 40px;
			color: #fff;
		}

	}
</style>
